<script setup>
import { onBeforeMount, onMounted, ref } from 'vue'
const obj = defineProps({
    msg: {
        type: Object,
        default: () => { }
    }
})

const domw = ref(0);
const docw = ref(0);
const lg = ref(0);

onBeforeMount(() => {
    lg.value = obj.msg.thead.length
    if (lg.value > 8) {
        domw.value = 180;
        docw.value = lg.value * 180;
    } else {
        domw.value = 100 / lg.value;
        docw.value = 0;
    }
})

</script>
<template>
    <div class="table-box">
        <div class="tb-l">
            <div class="tb-roll">
                <div class="tb-head" :style="{ width: lg > 8 ? docw + 'px' : '100%' }">
                    <div :style="{ width: lg > 8 ? domw + 'px' : domw + '%' }" v-for="i in msg.thead">{{ i }}</div>
                </div>
                <div class="tb-body" v-for="i in msg.tbody" :style="{ width: lg > 8 ? docw + 'px' : '100%' }">
                    <div v-for="(k, x) in i" :style="{ width: lg > 8 ? domw + 'px' : domw + '%' }">
                        <img v-if="msg.type == 0 && x == 0" :src="k" alt="">
                        <span v-else>{{ k }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="tb-r">
            <div class="tb-head" style="justify-content: center;">
                <div>操作</div>
            </div>
            <div class="operate-body" v-for="i in msg.tbody">
                <div class="tb-operate-b" :class="msg.type == 0 ? 'hg' : ''">
                    <span class="tb-operate" v-for="(t, x) in msg.operate"
                        :style="{ color: t != '删除' ? '#387BFF' : '#F84848' }">{{ t
                        }}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.table-box {
    display: flex;
    cursor: pointer;
    overflow: hidden;
}

.table-box>div {
    flex-shrink: 0;
    overflow: hidden;
}

.tb-l {
    width: calc(100% - 160px);
}

.tb-roll {
    width: 100%;
    overflow-x: auto;
}

.tb-r {
    width: 160px;
    box-shadow: -4px 0px 16px 0px rgba(220, 223, 230, 0.80);
}

.tb-head {
    height: 50px;
    display: flex;
    background-color: #F5F7FA;
    overflow: hidden;
}

.tb-head>div {
    flex-shrink: 0;
    height: 100%;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tb-body {
    display: flex;
    border-bottom: 1px solid #DCDFE6;
    overflow: hidden;
}

.tb-body>div {
    flex-shrink: 0;
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tb-body>div img {
    width: 120px;
    height: 90px;
}

.tb-body>div>span {
    display: inline-block;
    width: 90%;
    text-align: center;
    white-space: nowrap;
    /* 防止文字换行 */
    overflow: hidden;
    /* 隐藏超出容器的部分 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

.operate-body {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #DCDFE6;
    overflow: hidden;
}

.tb-operate-b {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.hg {
    height: 90px;
}

/* 
.tb-operate:first-child {
    margin-right: 16px;
} */
</style>